import { Tabs } from "antd-mobile";
import { Form, Input } from "antd-mobile";
import React, { useState } from "react";
import { Button } from "antd-mobile";
import useThrottle from "../hooks/useThrottle";
import { CountDown, Grid, Toast } from "react-vant";
function MyForm() {
  const click = () => {
    setIsDisabled(true);
  };
  const [isDisabled, setIsDisabled] = useState(false);
  return (
    <div>
      <div onClick={useThrottle(click, 400)}>
        <Tabs>
          <Tabs.Tab title="验证码登录" key="fruits">
            <Form layout="horizontal" mode="card">
              <Form.Item label="手机号">
                <Input placeholder="请输入" />
              </Form.Item>
            </Form>
            <Form layout="horizontal" mode="card">
              <Form.Item label="短信验证码" extra={<a>发送验证码</a>}>
                <Input placeholder="请输入" />
              </Form.Item>
              <CountDown time={50 * 120 * 10} format="ss 秒" />
            </Form>
            <Form
              name="form"
              footer={
                <Button
                  block
                  type="submit"
                  color="primary"
                  size="large"
                  disabled={isDisabled}
                >
                  登录
                </Button>
              }
            ></Form>
          </Tabs.Tab>

          <Tabs.Tab title="账号密码登录" key="vegetables">
            <Form layout="horizontal" mode="card">
              <Form.Item label="手机号">
                <Input placeholder="请输入" />
              </Form.Item>
            </Form>
            <Form layout="horizontal" mode="card">
              <Form.Item label="短信验证码" extra={<a>发送验证码</a>}>
                <Input placeholder="请输入" />
              </Form.Item>
            </Form>
            <Form
              name="form"
              footer={
                <Button block type="submit" color="primary" size="large">
                  登录
                </Button>
              }
            ></Form>
          </Tabs.Tab>
        </Tabs>
      </div>
    </div>
  );
}

export default MyForm;
